<template>
	<view class="photoWall">
		<view class="photoWall-left">
			<view class="photoWall-left-1">
				<u-image height="100%" width="100%" :src="imageList[0] && imageUrl+imageList[0].path"></u-image>
			</view>
			<view class="photoWall-left-2">
				民大剪影
				<image width="300" height="100" :style="{opacity: 0.5,height:'100rpx',width:'300rpx'}"
					:src="staticImage+'/school-gate.svg'" />
			</view>
			<view class="photoWall-left-3">
				<view class="photoWall-left-3-1" @click="$Router.push({name: 'videoList'})">
					<u-icon name="plus-circle-fill" size="38" />更多
				</view>
				<view class="photoWall-left-3-2">
					<u-image height="100%" width="100%" :src="imageList[1] && imageUrl+imageList[1].path"></u-image>
				</view>
			</view>
		</view>
		<view class="photoWall-right">
			<view class="photoWall-right-1">
				<u-image height="100%" width="100%" :src="imageList[4] && imageUrl+imageList[4].path"></u-image>
			</view>
			<view class="photoWall-right-2">
				<u-image height="100%" width="100%" :src="imageList[2] && imageUrl+imageList[2].path"></u-image>
			</view>
			<view class="photoWall-right-3">
				<u-image height="100%" width="100%" :src="imageList[3] && imageUrl+imageList[3].path"></u-image>
			</view>
		</view>
	</view>
</template>

<script>
	//图片墙
	import {
		getBannerImageList
	} from "@api"
	export default {
		name: "photoWall",
		data() {
			return {
				imageUrl: this.$t.URL.image,
				staticImage: this.$t.URL.staticImg,
				imageList: [],
				image1: '',
				image2: '',
				image3: '',
				image4: '',
			}
		},
		methods: {
			bgiStyle(i) {
				return {
					backgroundImage: `url(${this.imageUrl+(this.imageList[i].path || '')})`
				}
			}
		},
		created() {
			getBannerImageList({
					page: 0,
					size: 5
				})
				.then(res => {
					this.imageList = res;
					this.image1 = this.imageUrl + this.imageList[1].path
					this.image2 = this.imageUrl + this.imageList[2].path
					this.image3 = this.imageUrl + this.imageList[3].path
					this.image4 = this.imageUrl + this.imageList[4].path
				})
		}
	}
</script>

<style lang="scss" scoped>
	.photoWall {
		display: flex;
		padding: 30rpx;

		&-left {
			position: relative;
			flex: 2;
			color: #FFFFFF;

			&-1 {
				width: 100%;
				height: 200rpx;
				background-size: cover;
			}

			&-2 {
				width: 100%;
				height: 200rpx;
				font-size: 40rpx;
				padding: 30rpx 20rpx;
				background-color: $bg-success;
				background-size: 50% 100%;
				background-repeat: no-repeat;
			}

			&-3 {
				display: flex;

				&-1 {
					flex: 2;
					height: 100rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: $bg-success;
				}

				&-2 {
					flex: 3;
					height: 160rpx;
					background-size: cover;
				}
			}
		}

		&-right {
			flex: 3;
			position: relative;

			&-1 {
				width: 100%;
				height: 200rpx;
				background-size: cover;
			}

			&-2 {
				width: 100%;
				height: 170rpx;
				background-size: cover;
			}

			&-3 {
				width: 100%;
				height: 170rpx;
				background-size: cover;
			}
		}

	}
</style>
